<template>
	<el-card style="margin-bottom:20px;">
		<!-- 用户头像信息 -->
		<div class="user-profile">
			<div class="box-center">
				<img src="https://portrait.gitee.com/uploads/avatars/user/333/1001185_LevelCoder_1578937962.png!avatar30?imageView2/1/w/80/h/80"  />
			</div>
			<div class="box-center">
				<div class="user-name text-center">张三</div>
			</div>
		</div>
		<div class="account-center-detail">
			<p>
				<svg-icon icon-class="level"/> &nbsp;&nbsp;&nbsp;&nbsp; 黄金会员
			</p>
			<p>
				<i class="el-icon-message">电子邮件</i>
			</p>
			<p>
				<i class="el-icon-phone">联系方式</i>
			</p>
		</div>
		<!-- 用户基础信息 -->
		<div class="user-bio">
			<div class="user-education user-bio-section">
				<div class="user-bio-section-header">
					<svg-icon icon-class="education" /><span>Education</span></div>
				<div class="user-bio-section-body">
					<div class="text-muted">
						JS in Computer Science from the University of Technology
					</div>
				</div>
			</div>

		</div>
	</el-card>
</template>

<script>
	export default {
		props: {
			user: {
				type: Object,
				default: () => {
					return {
						name: '',
						email: '',
						avatar: '',
						roles: ''
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box-center {
		margin: 0 auto;
		display: table;
	}

	.text-muted {
		color: #777;
	}

	.user-profile {
		img{
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}
		
		.user-name {
			font-weight: bold;
		}

		.box-center {
			padding-top: 10px;
		}

		.user-role {
			padding-top: 10px;
			font-weight: 400;
			font-size: 14px;
		}

		.box-social {
			padding-top: 30px;
			.el-table {
				border-top: 1px solid #dfe6ec;
			}
		}

		.user-follow {
			padding-top: 20px;
		}
	}

	.user-bio {
		margin-top: 20px;
		color: #606266;

		span {
			padding-left: 4px;
		}

		.user-bio-section {
			font-size: 14px;
			padding: 15px 0;

			.user-bio-section-header {
				border-bottom: 1px solid #dfe6ec;
				padding-bottom: 10px;
				margin-bottom: 10px;
				font-weight: bold;
			}
		}
	}
</style>
